<template>
	<div class="view" v-if="Ok">
		<view class="tip">
			<text>温馨提示：</text>
			<text>以下结果仅供参考，最终以医院检查结果为准！</text>
		</view>
		<div class="result">
			健惜{{status == 1 ? '考虑' : '不排除'}}
			<text @click="btnPath('/pages/other/result/glossary?id=' + id + '&type' + type)"> {{data.diseaseName}}
			</text>
			可能，建议到医院的
			<text space="nbsp" v-for="(item, index) in department" :key="index"
				@click="btnPath('/pages/IndexPages/showDoctor/main?id=' + item.id + '&name=' + item.departmentName)">
				{{index==(department.length - 1) ? item.departmentName:item.departmentName+'，'}}
			</text>
			就诊做检查进一步确认
		</div>
		<p v-if="data && data.groupInfoList && data.groupInfoList.length > 0" class="title">您可以前往以下的圈子了解详细内容</p>
		<div class="group-box" v-for="(item, index) in data.groupInfoList" :key="index">
			<div class="list" @click="btnPath('/pages/CommunityPages/circleDetails/main?id=' + item.id)">
				<img class="icon" :src="item.iconUrl">
				<p class="name">{{item.groupName}}</p>
				<view class="btn">进入圈子</view>
			</div>
		</div>
		<p class="title">名医推荐</p>
		<view class="list" v-if="doctorList.length != 0">
			<doctor-item v-for="(item, index) in doctorList" :key="index" :item="item"></doctor-item>
		</view>
	</div>
</template>

<script>
	import {
		addBrowserHistory
	} from '@/apis/request.js'
	import DoctorItem from '@/components/doctor-item/doctor-item.vue';

	export default {
		data() {
			return {
				Ok: false,
				id: null,
				type: 0,
				status: 1,
				data: null,
				department: [],
				doctorList: []
			}
		},
		onLoad(options) {
			this.id = options.id
			this.type = options.type
			this.status = options.status
			this.getApiIndexData()
			if (uni.getStorageSync('token')) {
				this.addRecord()
			}
		},
		methods: {
			addRecord() {
				addBrowserHistory({
					isChild: this.type % 2 == 0 ? 1 : 0,
					type: 3,
					objectId: this.id
				}).then(res => {})
			},
			// 请求主数据
			getApiIndexData() {
				this.$api.http(
					'/sms/smsBodyPartsInfo/api/n/getOneInfoByDiseaseId',
					'GET', {
						diseaseId: this.id,
						isChild: this.type % 2 == 0 ? 1 : 0
					},
					res => {
						this.Ok = true
						if (res.data.result.id) this.data = res.data.result
						let departmentIdList = []
						res.data.result.departmentInfoList.forEach(item => {
							this.department.push(item)
							departmentIdList.push(item.id)
						})
						this.getRecommentDoctor(departmentIdList)
					}
				)
			},
			// 路由 - 跳转
			btnPath(url) {
				uni.navigateTo({
					url: url
				})
			},
			getRecommentDoctor(ids) {
				const city = uni.getStorageSync('city')
				this.$api.http('/hospital/medicalDoctorInfo/api/n/doctorRecommendationPageList',
					'POST', {
						cityId: city ? city.id : '350200',
						departmentIdList: ids,
						pageNo: 1,
						pageSize: 20
					}, res => {
						this.doctorList = res.data.result.records
					})
			},
		}
	}
</script>

<style scoped lang="scss">
	.view {
		.tip {
			background: #F9EDDA;
			padding: 20rpx 30rpx;
			font-size: 26rpx;

			text:nth-child(1) {
				color: #DD1D1A;
			}

			text:nth-child(2) {
				color: #E6B664;
			}
		}

		.title {
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			font-size: 28rpx;
		}

		.list {
			background-color: #ffffff;
		}

		.result {
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			color: #000000;
			font-size: 32rpx;
			line-height: 60rpx;
			background-color: #FFF;

			text {
				color: #32C59A;
			}
		}

		.group-box {
			background-color: #FFF;

			.list {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 30rpx;
				width: 170rpx;
				text-align: center;

				.icon {
					width: 80rpx;
					height: 80rpx;
				}

				.name {
					margin-top: 10rpx;
					width: 110rpx;
					font-size: 24rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.btn {
					padding: 6rpx 16rpx;
					margin-top: 20rpx;
					font-size: 20rpx;
					color: #FFFFFF;
					border-radius: 30rpx;
					background-color: #32C59A;
				}
			}
		}

		.tips {
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			color: #AAA;

			.text {
				color: #dd1d1a;
			}
		}

		.item:nth-last-child(1) {
			border: none;
		}
	}
</style>